     <template>
  <div>
        <van-loading size="24px" vertical v-if="isShow">加载中...</van-loading>
    <div class="newContainer">
      <ul>
        <li v-for="item in beijingGameNewsData" :key="item.detail_link">
          <div class="new-left">
            <span class="NewsItem_p-title">{{item.title}}</span>
            <van-tag plain  type="danger">热评{{item.commit}}</van-tag>
          </div>
          <div class="new-right">
            <img
              :src="item.img_link"
              alt=""
            />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      beijingGameNewsData:[],
       isShow:true
    }
  },
  methods:{
    getbeijingGameNewsData(){
      this.$http.get('/api/beijinggame').then(res=>{
        // console.log(res);
        if(res.status == 200){
          this.beijingGameNewsData = res.data;
           this.isShow = false
        }
      })
    }
  },
    watch:{
    $route:{
immediate: true,
      handler() {
        if (this.$route.name == "北京冬奥会") {
             this.getbeijingGameNewsData()
        }
      },
    }
  },
  created(){
  }
};
</script>


<style lang="less" scoped>
.newContainer {
  width: 100%;
  height: 20rem;
  // background-color: pink;
  ul {
    width: 100%;
    li {
      display: inline-block;
      margin-top: .2rem;
      width: 100%;
      height: 2rem;
      border-bottom: 1px solid #efefef;
      display: flex;
      .new-left {
        //  padding: 0  0 .2rem .2rem;
        flex: 7;
        padding-left: 0.3rem;
      .NewsItem_p-title {
    display: -webkit-box;
    // margin-right:0.6rem;
    overflow: hidden;
    color: #191c22;
    font-weight: 400;
    font-size: .40rem;
    line-height: 6.4vw;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
      }
      }
      .new-right {
        flex: 3;
        // padding: .2rem .2rem .2rem 0;
        img {
          width: 80%;
         border-radius: .055rem;
         object-fit: cover;
         background-color: #e5e5e5;
        }
      }
    }
  }
}
</style>

